<!-- created:2023/2/15 23:28 By AdinZ  接龙订单 -->
<template>
  <div class="OrderSolitaire">
    <el-descriptions :column="2" border>
      <el-descriptions-item label-class-name="description-label" label="活动图片">
        <el-image :src="data.thumb" :preview-src-list="[data.thumb]" style="width: 50px;height: 50px"/>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="description-label" label="活动名称">
        {{ data.title }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="description-label" label="活动开始时间">
        {{ parseTime(data.startTime) }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="description-label" label="活动结束时间">
        {{ parseTime(data.endTime) }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="description-label" label="兑换开始时间">
        {{ parseTime(data.useStart) }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="description-label" label="兑换结束时间">
        {{ parseTime(data.useEnd) }}
      </el-descriptions-item>
    </el-descriptions>

    <el-table :data="list" border stripe style="width: 100%">
      <el-table-column type="index" width="50" label="#"/>
      <el-table-column prop="id" label="订单id" width="200" align="center"/>
      <el-table-column label="买家" width="180" align="center">
        <template #default="data">
          <div class="flex flex-center" v-if="data.row.user">
            <img :src="data.row.user.avatar" style="width:60px;height: 60px">
            <div class="nickname flex1">
              {{ data.row.user.mobile }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="title" label="商品标题" width="180" align="center"/>
      <el-table-column prop="price" label="购买价格" width="100" align="center"/>
      <el-table-column prop="number" label="次卡数量" width="100" align="center"/>
      <el-table-column prop="useNum" label="使用数量" width="100" align="center"/>
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template #default="data">
        <span v-if="data.row.status==0">待使用</span>
        <span v-if="data.row.status==1">已使用</span>
        <span v-if="data.row.status==2">已过期</span>
        </template>
      </el-table-column>
      <el-table-column prop="created" label="下单时间" width="180" align="center">
        <template #default="data">
          {{ parseTime(data.row.created) }}
        </template>
      </el-table-column>

    </el-table>


    <el-pagination :current-page="query.page" :page-size="query.size" @current-change="getList"
                   @size-change="getList" background
                   layout="sizes,prev, pager, next"
                   :total="query.total"/>
  </div>
</template>

<script>
import orderMixin from "@/views/activity/order/components/orderMixin";
import {orderStatus} from "../../../../utils/shopkeeper";

export default {
  name: "OrderCard",
  mixins: [orderMixin],


  methods: {
    parseStatus: orderStatus,
    getList() {
      this.$api.apiQuery('/api/manage/activity-order/card/', this.query).then(res => {
        this.list = res.data;
        this.query.total = res.total;
      })
    }

  }
}
</script>

<style scoped lang="scss">
.OrderSolitaire {

}
</style>
